<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邀请函 | 小糯米一周岁生日</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B9B',
                        secondary: '#6BCBFF',
                        accent: '#FFD66B',
                        envelope: '#E57373'
                    },
                    fontFamily: {
                        cute: ['"Comic Sans MS"', '"Bubblegum Sans"', 'cursive'],
                        elegant: ['"Garamond"', '"Times New Roman"', 'serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .envelope-flap {
                transform-origin: bottom;
                transition: transform 1s ease;
            }
            .envelope-opened .envelope-flap {
                transform: rotateX(180deg);
            }
            .invitation-card {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%) translateY(100%);
                transition: transform 1s ease 0.5s;
                width: 90%;
                height: 90%;
                perspective: 1000px;
            }
            .envelope-opened .invitation-card {
                transform: translateX(-50%) translateY(10%);
            }
            .card-inner {
                position: relative;
                width: 100%;
                height: 100%;
                transition: transform 1s;
                transform-style: preserve-3d;
            }
            .card-flipped .card-inner {
                transform: rotateY(180deg);
            }
            .card-front, .card-back {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
            }
            .card-back {
                transform: rotateY(180deg);
            }
            .location-pulse {
                animation: pulse 2s infinite;
            }
            .birthday-hat {
                position: absolute;
                cursor: pointer;
                transition: all 0.3s ease;
                z-index: 10;
            }
            .birthday-hat:hover {
                transform: scale(1.2) rotate(10deg);
            }
            .confetti {
                position: absolute;
                width: 10px;
                height: 10px;
                opacity: 0;
            }
            .game-hat {
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .game-hat:hover {
                transform: scale(1.1);
            }
            .game-success {
                animation: success-pulse 1s ease-in-out;
            }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes confetti-fall {
            0% {
                transform: translateY(-10vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(110vh) rotate(720deg);
                opacity: 0;
            }
        }

        @keyframes wiggle {
            0%, 100% { transform: rotate(-3deg); }
            50% { transform: rotate(3deg); }
        }

        @keyframes success-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); box-shadow: 0 0 15px rgba(255, 107, 155, 0.7); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen font-cute overflow-x-hidden relative">
    <!-- 背景音乐 -->
    <audio id="background-music" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>
    <audio id="open-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3" type="audio/mpeg">
    </audio>
    <audio id="pop-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" type="audio/mpeg">
    </audio>
    <audio id="complete-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3" type="audio/mpeg">
    </audio>
    <audio id="game-success-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3" type="audio/mpeg">
    </audio>

    <!-- 隐藏的生日帽 -->
    <div id="hidden-hats" class="fixed inset-0 pointer-events-none z-20"></div>

    <!-- 粒子容器 -->
    <div id="particle-container" class="fixed inset-0 pointer-events-none z-10"></div>

    <!-- 主内容 -->
    <div class="container mx-auto px-4 py-8 relative z-30">
        <!-- 导航 -->
        <nav class="flex justify-between items-center mb-10">
            <a href="index.html" class="text-gray-700 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-home mr-2"></i> 首页
            </a>
            <h1 class="text-2xl md:text-3xl font-bold text-primary">生日邀请函</h1>
            <div class="w-10"></div> <!-- 占位，保持导航平衡 -->
        </nav>

        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h2 class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-primary text-shadow mb-4">诚挚邀请</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">请打开信封，查收小糯米一周岁生日派对的邀请</p>
        </div>

        <!-- 信封容器 -->
        <div class="relative max-w-md mx-auto h-[70vh] min-h-[500px] mb-16 flex items-center justify-center">
            <!-- 信封 -->
            <div id="envelope" class="envelope relative w-full max-w-md aspect-[4/5] cursor-pointer">
                <!-- 信封主体 -->
                <div class="absolute inset-0 bg-envelope rounded-t-3xl shadow-2xl overflow-hidden">
                    <!-- 信封线条装饰 -->
                    <div class="absolute top-1/4 left-0 right-0 h-1 bg-envelope/70"></div>
                    <div class="absolute top-2/4 left-0 right-0 h-1 bg-envelope/70"></div>
                    <div class="absolute top-3/4 left-0 right-0 h-1 bg-envelope/70"></div>

                    <!-- 邮票 -->
                    <div class="absolute top-4 right-4 w-16 h-16 bg-accent rounded-md transform rotate-12 flex items-center justify-center shadow-md">
                        <span class="text-white font-bold text-sm">LOVE</span>
                    </div>
                </div>

                <!-- 信封封口 -->
                <div class="envelope-flap absolute top-0 left-0 right-0 h-1/2 bg-envelope/90 rounded-t-3xl"></div>

                <!-- 信封封蜡 -->
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-primary rounded-full shadow-lg z-10 flex items-center justify-center">
                    <i class="fa fa-heart text-white text-xl"></i>
                </div>

                <!-- 邀请函卡片 -->
                <div class="invitation-card">
                    <div class="card-inner">
                        <!-- 卡片正面 -->
                        <div class="card-front bg-white rounded-2xl shadow-2xl overflow-hidden">
                            <div class="h-1/3 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                                <h3 class="text-2xl md:text-3xl font-bold text-white text-shadow">小糯米一周岁啦！</h3>
                            </div>
                            <div class="h-2/3 p-6 md:p-8">
                                <div class="text-center mb-6">
                                    <i class="fa fa-birthday-cake text-5xl text-accent animate-pulse"></i>
                                </div>
                                <p class="text-gray-700 text-center mb-6">诚邀您参加我们宝贝的一周岁生日派对</p>
                                <div class="text-center">
                                    <button id="flip-card" class="bg-primary text-white font-bold py-2 px-6 rounded-full shadow-md hover:bg-primary/90 transition-colors">
                                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                                    </button>
                                </div>

                                <!-- 装饰元素 -->
                                <div class="absolute bottom-4 left-4 w-8 h-8 bg-secondary/20 rounded-full"></div>
                                <div class="absolute top-4 right-4 w-6 h-6 bg-accent/20 rounded-full"></div>
                            </div>
                        </div>

                        <!-- 卡片背面 -->
                        <div class="card-back bg-white rounded-2xl shadow-2xl overflow-hidden p-6 md:p-8">
                            <h3 class="text-2xl font-bold text-primary text-center mb-6">派对详情</h3>

                            <div class="space-y-6">
                                <div class="flex items-start">
                                    <div class="bg-primary/10 p-3 rounded-full mr-4">
                                        <i class="fa fa-calendar text-primary"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">日期时间</h4>
                                        <p id="party-date" class="text-gray-600"></p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div class="bg-secondary/10 p-3 rounded-full mr-4">
                                        <i class="fa fa-map-marker text-secondary"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">派对地点</h4>
                                        <p id="party-location" class="text-gray-600"></p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div class="bg-accent/10 p-3 rounded-full mr-4">
                                        <i class="fa fa-gift text-accent"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">派对主题</h4>
                                        <p id="party-theme" class="text-gray-600"></p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div class="bg-purple/10 p-3 rounded-full mr-4">
                                        <i class="fa fa-phone text-purple"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">联系我们</h4>
                                        <p id="party-contact" class="text-gray-600"></p>
                                    </div>
                                </div>
                            </div>

                            <!-- 地图 -->
                            <div class="mt-8 rounded-xl overflow-hidden shadow-md relative h-48 border border-gray-200">
                                <img src="https://picsum.photos/seed/map/800/400" alt="派对地点地图" class="w-full h-full object-cover">

                                <!-- 位置标记 -->
                                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <div class="w-6 h-6 bg-primary rounded-full location-pulse"></div>
                                    <div class="w-6 h-6 bg-primary rounded-full absolute top-0 left-0 location-pulse" style="animation-delay: 0.5s;"></div>
                                </div>
                            </div>

                            <!-- RSVP按钮 -->
                            <div class="mt-8 text-center">
                                <button id="rsvp-button" class="bg-gradient-to-r from-primary to-secondary text-white font-bold py-3 px-8 rounded-full shadow-lg hover:opacity-90 transition-opacity transform hover:scale-105 active:scale-95">
                                    我会参加 <i class="fa fa-heart ml-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 小游戏区域 -->
        <div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-lg p-6 border border-gray-100 mb-16">
            <h3 class="text-2xl font-bold text-primary mb-6 text-center flex items-center">
                <i class="fa fa-gamepad mr-2"></i> 寻找小帽子
            </h3>

            <p class="text-gray-600 text-center mb-6">在限定时间内点击出现的生日帽，测试你的反应速度吧！</p>

            <div class="flex justify-center mb-6">
                <div class="flex items-center mr-8">
                    <i class="fa fa-clock-o text-secondary mr-2"></i>
                    <span id="game-time">30秒</span>
                </div>
                <div class="flex items-center">
                    <i class="fa fa-star text-accent mr-2"></i>
                    <span>得分: <span id="game-score">0</span></span>
                </div>
            </div>

            <!-- 游戏区域 -->
            <div id="game-area" class="relative bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl h-64 overflow-hidden mb-6 border border-gray-200">
                <div class="absolute inset-0 flex items-center justify-center" id="game-start-screen">
                    <button id="start-game" class="bg-primary text-white font-bold py-3 px-8 rounded-full shadow-md hover:bg-primary/90 transition-colors transform hover:scale-105">
                        开始游戏 <i class="fa fa-play ml-2"></i>
                    </button>
                </div>
                <div id="game-over-screen" class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center hidden">
                    <h4 class="text-white text-2xl font-bold mb-4">游戏结束!</h4>
                    <p class="text-white mb-6">你的得分: <span id="final-score">0</span></p>
                    <button id="restart-game" class="bg-primary text-white font-bold py-2 px-6 rounded-full shadow-md hover:bg-primary/90 transition-colors">
                        再玩一次 <i class="fa fa-refresh ml-2"></i>
                    </button>
                </div>
            </div>

            <div class="text-sm text-gray-500 text-center">
                <p>游戏说明: 点击屏幕上出现的生日帽得分，时间结束后统计总分</p>
            </div>
        </div>
    </div>

    <!-- 成功提示 -->
    <div id="rsvp-toast" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg opacity-0 pointer-events-none transition-opacity z-50">
        确认参加成功！我们期待您的到来。
    </div>

    <script>
        // 页面数据
        let pageData = null;

        // 游戏变量
        let gameInterval;
        let gameTime = 30;
        let score = 0;
        let isPlaying = false;

        // DOM加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载页面数据
            fetch('data/content.json')
                .then(response => {
                    if (!response.ok) throw new Error('数据加载失败');
                    return response.json();
                })
                .then(data => {
                    pageData = data;

                    // 填充页面内容
                    document.getElementById('party-date').textContent = data.party.date;
                    document.getElementById('party-location').textContent = data.party.location;
                    document.getElementById('party-theme').textContent = data.party.theme;
                    document.getElementById('party-contact').textContent = data.party.contact;

                    // 初始化页面
                    initPage();
                    initGame();
                })
                .catch(error => {
                    console.error('初始化失败:', error);
                    alert('页面加载失败，请刷新重试');
                });

            // 播放背景音乐
            const music = document.getElementById('background-music');
            music.volume = 0.3;
            music.play().catch(e => {
                console.log('需要用户交互才能播放音乐:', e);
                document.addEventListener('click', () => {
                    music.play();
                }, { once: true });
            });
        });

        // 初始化页面
        function initPage() {
            // 信封点击事件
            const envelope = document.getElementById('envelope');
            envelope.addEventListener('click', function() {
                if (!envelope.classList.contains('envelope-opened')) {
                    envelope.classList.add('envelope-opened');
                    document.getElementById('open-sound').play();
                    createConfetti();
                }
            });

            // 卡片翻转事件
            document.getElementById('flip-card').addEventListener('click', function() {
                document.querySelector('.invitation-card').classList.add('card-flipped');
                document.getElementById('pop-sound').play();
            });

            // RSVP按钮事件
            document.getElementById('rsvp-button').addEventListener('click', function() {
                document.getElementById('complete-sound').play();
                showToast('rsvp-toast');
            });
        }

        // 初始化游戏
        function initGame() {
            // 开始游戏按钮
            document.getElementById('start-game').addEventListener('click', startGame);

            // 重新开始按钮
            document.getElementById('restart-game').addEventListener('click', restartGame);
        }

        // 开始游戏
        function startGame() {
            // 重置游戏状态
            score = 0;
            gameTime = 30;
            isPlaying = true;

            // 更新显示
            document.getElementById('game-score').textContent = score;
            document.getElementById('game-time').textContent = gameTime + '秒';

            // 隐藏开始屏幕
            document.getElementById('game-start-screen').classList.add('hidden');

            // 开始计时
            gameInterval = setInterval(() => {
                gameTime--;
                document.getElementById('game-time').textContent = gameTime + '秒';

                // 随机生成帽子
                if (Math.random() > 0.7) {
                    createGameHat();
                }

                // 时间到，游戏结束
                if (gameTime <= 0) {
                    endGame();
                }
            }, 1000);
        }

        // 结束游戏
        function endGame() {
            isPlaying = false;
            clearInterval(gameInterval);

            // 显示最终得分
            document.getElementById('final-score').textContent = score;

            // 移除所有帽子
            const hats = document.querySelectorAll('.game-hat');
            hats.forEach(hat => hat.remove());

            // 显示游戏结束屏幕
            document.getElementById('game-over-screen').classList.remove('hidden');

            // 播放完成音效
            if (score > 0) {
                document.getElementById('complete-sound').play();
            }
        }

        // 重新开始游戏
        function restartGame() {
            // 隐藏游戏结束屏幕
            document.getElementById('game-over-screen').classList.add('hidden');

            // 开始新游戏
            startGame();
        }

        // 创建游戏帽子
        function createGameHat() {
            if (!isPlaying) return;

            const gameArea = document.getElementById('game-area');
            const areaRect = gameArea.getBoundingClientRect();

            // 随机位置和大小
            const size = Math.floor(Math.random() * 20) + 30;
            const left = Math.floor(Math.random() * (areaRect.width - size));
            const top = Math.floor(Math.random() * (areaRect.height - size));

            // 创建帽子元素
            const hat = document.createElement('div');
            hat.className = 'game-hat absolute';
            hat.style.width = size + 'px';
            hat.style.height = size + 'px';
            hat.style.left = left + 'px';
            hat.style.top = top + 'px';
            hat.innerHTML = '<i class="fa fa-hat-wizard text-2xl text-primary"></i>';

            // 点击帽子得分
            hat.addEventListener('click', function() {
                score++;
                document.getElementById('game-score').textContent = score;
                document.getElementById('game-success-sound').play();

                // 添加成功动画
                hat.classList.add('game-success');

                // 移除帽子
                setTimeout(() => {
                    hat.remove();
                }, 200);
            });

            // 添加到游戏区域
            gameArea.appendChild(hat);

            // 一段时间后自动移除
            setTimeout(() => {
                if (gameArea.contains(hat)) {
                    hat.remove();
                }
            }, 1500);
        }

        // 显示提示框
        function showToast(id) {
            const toast = document.getElementById(id);
            toast.classList.remove('opacity-0');
            toast.classList.add('opacity-100');

            setTimeout(() => {
                toast.classList.remove('opacity-100');
                toast.classList.add('opacity-0');
            }, 3000);
        }

        // 创建彩屑效果
        function createConfetti() {
            const container = document.getElementById('particle-container');
            const colors = ['#FF6B9B', '#6BCBFF', '#FFD66B', '#A78BFA', '#6BFFB8'];

            for (let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.width = Math.random() * 10 + 5 + 'px';
                confetti.style.height = Math.random() * 10 + 5 + 'px';
                confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear forwards`;
                confetti.style.animationDelay = Math.random() * 2 + 's';

                container.appendChild(confetti);

                // 动画结束后移除
                setTimeout(() => {
                    confetti.remove();
                }, 5000);
            }
        }
    </script>
</body>
</html>